import {computeIcon} from "@/utils/gps/iconTransform";
import {Circle, Fill, Icon, Stroke, Style, Text} from "ol/style";
import {computeSubTitle} from "@/utils/gps/format";
import poly from "@/assets/poly.png";
import {Feature} from "ol";
import {StyleLike} from "ol/style/Style";
import {LineString, Point} from "ol/geom";

export const lineStyle = {
    low: {
        stroke: {
            color: '#E6A23C',
            width: 6
        }
    },
    normal: {
        stroke: {
            color: '#67C23A',
            width: 6
        }
    },
    speeding: {
        stroke: {
            color: '#F56C6C',
            width: 6
        }
    }
}

/**
 * 获取矢量图样式
 * @param feature
 * @param list
 */
export function calculationStyles(feature, list) {
    const features = feature.get('features')
    if (features.length === 1) {
        const data = list[features[0].getId()]!
        let iconPath: any = computeIcon(data)
        return new Style({
            image: new Icon({
                anchor: [0.5, 0.5],
                rotateWithView: true,
                width: 40,
                height: 40,
                rotation: Math.PI / 180 * (data.direction % 360),
                src: iconPath
            }),
            text: new Text({
                text: `${data.plateNo} ${computeSubTitle(data)}`,
                offsetY: 35,
                scale: 1.5,
                textAlign: 'center',
                fill: new Fill({
                    color: '#85ef74'
                }),
                backgroundFill: new Fill({
                    color: '#679cff'
                }),
                // backgroundStroke: new Stroke({
                //   color: "#679cff",
                //   width: 2,
                // }),
                padding: [2, 10, 0, 10]
            })
        })
    } else {
        return new Style({
            image: new Icon({
                anchor: [0.5, 0.5],
                src: poly
            }),
            text: new Text({
                text: String(features.length),
                font: '14px sans-serif',
                fill: new Fill({
                    color: '#fff'
                })
            })
        })
    }
}


export function drawStyleFunc(feature: Feature): StyleLike | undefined{
    if(feature === undefined) return
    let styles: StyleLike = [];
    const type = feature.getGeometry()?.getType();
    // @ts-ignore
    const coordinate = feature.getGeometry()?.getCoordinates();
    if(!coordinate) return
    for (let i = 0; i < coordinate.length - 1; i++) {
        styles.push(
            new Style({
                geometry: new Point(coordinate[i]),
                image: new Circle({
                    radius: 4,
                    fill: new Fill({
                        color: '#ffff'
                    }),
                    stroke: new Stroke({
                        color: 'orange',
                        width: 2
                    })
                })
            })
        );
    }
    if (type === 'LineString') {
        for (let i = 0; i < coordinate.length - 1; i++) {
            styles.push(
                new Style({
                    geometry: new LineString([coordinate[i], coordinate[i + 1]]),
                    stroke: new Stroke({
                        color: 'orange',
                        lineDash: coordinate.length > 2 && i < coordinate.length - 2 ? [] : [10],
                        width: 2
                    })
                })
            );
        }
    }
    return styles;
}

export function drawLayerStyleFunc(feature: Feature): StyleLike | undefined{
    if(feature === undefined) return
    const styles: StyleLike = [];
    // @ts-ignore
    const coordinate = feature.getGeometry()?.getCoordinates();
    if(coordinate) {
        for (let i = 0; i < coordinate[0].length - 1; i++) {
            styles.push(
                new Style({
                    geometry: new Point(coordinate[0][i]),
                    image: new Circle({
                        radius: 4,
                        fill: new Fill({
                            color: '#ffff'
                        }),
                        stroke: new Stroke({
                            color: 'orange',
                            width: 2
                        })
                    })
                })
            );
        }
    }
    styles.push(
        new Style({
            fill: new Fill({
                color: [128, 128, 255, 0.5]
            }),
            stroke: new Stroke({
                color: 'blue',
                width: 2
            })
        })
    );
    return styles;
}


export function enclosureStyleFunc(feature: Feature): StyleLike | undefined{
    if(feature === undefined) return
    return new Style({
        fill: new Fill({
            color: [128, 128, 255, 0.2]
        }),
        stroke: new Stroke({
            color: 'red',
            width: 2
        }),
        text: new Text({
            text: feature.get("name"),
            font: '14px sans-serif',
            fill: new Fill({
                color: 'white'
            }),
            backgroundFill: new Fill({
                color: '#fa67ff'
            }),
            textAlign: 'center',
            padding: [2, 10, 0, 10]
        })
    })
}